<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-21 17:17:50
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-14 14:10:31
 * @FilePath: \sr_system_manager_ui\src\views\index.vue
 * @Description: 首页/工作台
-->
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
import useUserStore from '@/store/modules/user'
import { getNoticePageApi } from "@/api/project/index"
import { getUpcomingListPage, getUpcomingNormalListPage } from "@/api/home/index"
import { skipType } from "@/utils/achievementSkipType"
import { getResultDetailReq } from "@/api/resultsManagement/assessmentReward/index"
import ModuleList from './home/components/ModuleList.vue'
import Pending from './home/components/Pending.vue'

const userStore = useUserStore()
const router = useRouter()
const noticeList = ref<any>([])
const upcomingList = ref<any>([])
const pendingCount = ref() // 待办数量
const curId = ref()

// 查询管理员待办列表
const { run: getUpcomingList, loading } = useRequest(getUpcomingListPage, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    pendingCount.value = data.upcomingCount
    // 院管理员
    if(userStore.currentIdentityCode === 'FACULTY_ADMIN') {
      upcomingList.value = data.achvCountVOList
    } else{
      upcomingList.value = [...data?.projectCountVOList, ...data?.achvCountVOList]
    }
  },
})
// // 查询教职工待办列表
const { run: getUpcomingNormalList, loading: normalLoading } = useRequest(getUpcomingNormalListPage, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    upcomingList.value = data.normalCountVOList || []
    pendingCount.value = data.upcomingCount
  },
})

// 查询通知列表
const { run: getNoticePage, loading: noticeLoading } = useRequest(getNoticePageApi, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data) => {
    noticeList.value = data?.content || []
  },
})

onMounted(() => {
  getNoticePage({
    page: 1,
    size: 9,
    publishStatus: 2,
  })
  // 教职工
  if(userStore.currentIdentityCode === 'NORMAL'){
    getUpcomingNormalList()
  } else{
    getUpcomingList()
  }

})

// 成果详情-通知
const { run: getResultDetail } = useRequest(getResultDetailReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    
    if(userStore.currentIdentityCode === 'NORMAL') {
      // 教职工
      router.push(`/resultsManagement/mine/mine-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    } else if(userStore.currentIdentityCode === 'FACULTY_ADMIN') {
      // 院系/部
      router.push(`/resultsManagement/college/college-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    } else{
      // 管理员
      router.push(`/resultsManagement/office/office-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    }
  },
})

// 查看通知详情：1项目申报 2项目预警 3成果通知
function toView(record) {
  curId.value = record.id
  if(record.noticeType === 1)
    router.push(`/project/manage/noticesDetails?id=${record.id}&from=notices`)
  else if(record.noticeType === 2)
    router.push(`/project/mine/edit?projectNature=${record.projectNature}&projectId=${record.projectId}&mode=view&projectName=${record.projectName}`)
  else if(record.noticeType === 3){
    curId.value = record.projectId
    getResultDetail({id: record.projectId})
  }
  
}
</script>

<template>
  <div class="home-content">
    <template v-if="userStore.currentIdentityCode !== 'MANAGER_SUPER_ADMIN'">
      <div class="flex h-[410px]">
        <div class="home-left">
          <div class="home-title pr-[20px]">
            <div>
              <i class="iconfont icon-daiban icon-title" />
              <span>待办事项</span>
            </div>
            <div v-if="upcomingList.length" class="h-[20px]">
              <span class="num">{{ pendingCount }}</span>
              <span>项</span>
            </div>
          </div>
          <el-scrollbar height="100%" v-loading="loading || normalLoading">
            <template v-if="upcomingList.length">
              <Pending v-for="item in upcomingList" :key="item.id" :item="item" />
            </template>
            <el-empty v-else class="mx-auto mt-[60px]" :image-size="60" description="暂无数据" />
          </el-scrollbar>
        </div>
        <div class="home-right">
          <div class="notice-cotent">
            <div class="home-title">
              <div>
                <i class="iconfont icon-tongzhi icon-title" />
                <span>通知公告</span>
              </div>
              <router-link to="/home/noticeList" class="more">更多 <i class="iconfont icon-Property1youProperty2xian" /></router-link>
            </div>
            <el-scrollbar height="100%" v-loading="noticeLoading">
              <ul v-if="noticeList.length">
                <li v-for="item in noticeList" :key="item.id" @click="toView(item)">
                  <span v-if="item.noticeType === 1" class="li-text">{{item.title}}</span>
                  <span v-else v-html="item.content" class="li-text" />
                  <span v-if="item.noticeType === 1" class="text-[#F53F3F] whitespace-nowrap">{{formateDate(item.declareEndTime).format('YYYY.MM.DD')}} 截止</span>
                  <span v-else  class="whitespace-nowrap">{{formateDate(item.updatedTime).format('YYYY.MM.DD')}}</span>
                </li>
              </ul>
              <el-empty v-else class="mx-auto mt-[60px]" :image-size="60" description="暂无数据" />
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="user-module">
        <div class="home-title">
          <div>
            <i class="iconfont icon-gongtai icon-title" />
            <span>常用功能</span>
          </div>
        </div>
        <ModuleList />
      </div>
    </template>
    <div v-else class="super-item">
      <div class="home-title">
        <div>
          <i class="iconfont icon-gongtai icon-title" />
          <span>常用功能</span>
        </div>
      </div>
      <ModuleList />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.home-content{
  @apply: w-full;
  .home-title{
    @apply: flex justify-between items-center mb-[16px];
    div{
      @apply: flex items-center;
      i + span{
        @apply: inline-block text-[16px] font-700 h-[20px] leading-[22px];
      }
      .icon-title{
        @apply: h-[22px] leading-[20px] px-[3px] rounded-[6px] text-white mr-[8px];
        background: linear-gradient(131deg, #84C3FF 15.21%, #3F7DF9 85.83%);
        box-shadow: 2px 2px 8px 0 #D1E1FF;
      }
      .num{
        @apply: text-[#F53F3F] text-[16px] font-700 mr-[4px];
      }
    }
    .more{
      @apply: text-[#86909C];
    }
  }
  .super-item{
    @apply: w-full h-full bg-white rounded-[8px] py-[20px] pl-[20px];
  }
  .home-left{
    @apply: flex-1 h-full bg-white rounded-[8px] py-[20px] pl-[20px];
    width: calc(100% - 520px);
    .item:last-child{
      @apply: mb-0;
    }
  }
  .el-scrollbar{
    @apply: pr-[20px];
    height: calc(100% - 38px);
  }
  .home-right{
    @apply: w-[36%] min-w-[500px] h-full ml-[20px] p-[20px] pb-[8px] bg-white rounded-[8px];
    .notice-cotent{
      @apply: h-full;
      ul{
        @apply: p-0 m-0 h-[180px];
        li{
          @apply: text-[#4E5969] text-[14px] py-[8px] pl-[12px] leading-[20px] cursor-pointer flex justify-between items-center relative;
          &::before{
            content: '';
            @apply: inline-block w-[4px] h-[4px] rounded-full bg-[#F77234] absolute left-0 top-[16px];
          }
          &:hover span,
          &:hover{
            @apply: text-[$--color-primary] underline;
          }
          .li-text{
            @apply: flex-auto truncate mr-[20px];
          }
        }
      }
    }
  }
  .user-module{
    @apply: w-full p-[20px] pr-0 mt-[20px] bg-white rounded-[8px];
    min-height: calc(100vh - 576px);
  }
  .super-item{
    height: calc(100vh - 146px);
  }
}
</style>